<template>
  <div class="create-order-form">
    <div class="form">
      <!-- 表单 -->
      <el-form label-position="left" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品主图">
              <img :src="itemDetail.itemMainImg" class="main-img" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品名称">
              <span>{{itemDetail.itemName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              v-for="(choosen, jsonKey, index) in choosenJson"
              :key="index"
              :label="jsonKey"
            >
              <el-radio-group
                v-for="(item, choosenKey, index) in choosen"
                :key="index"
                v-model="submitDate.skuAttr[jsonKey]"
              >
                <el-radio-button :label="item"></el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="购买数量">
              <el-input-number
                v-model="submitDate.quantity"
                :precision="0"
                :step="1"
                :min="0"
                :max="99999"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="买家姓名">
              <el-input v-model="submitDate.realName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="手机号">
              <el-input v-model="submitDate.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="收货地址">
              <el-input v-model="submitDate.deliveryLocation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支付方式">
              <!-- cash现金支付，alipay支付宝支付，wechat微信支付，bankCard银行卡支付 -->
              <el-radio-group v-model="submitDate.payType">
                <el-radio v-for="(item, key, index) in PAY_TYPE" :key="index" :label="key">{{item}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="销售备注">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5}"
                v-model="submitDate.sellerRemark"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btn-group">
      <span class="total-fee">
        总计：
        <span class="fee">{{totalFee | formatPrice}}</span>
      </span>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "create-order-form",
  components: {},
  props: {
    itemId: {
      type: Number
    }
  },
  data() {
    return {
      PAY_TYPE: this.$common.PAY_TYPE,
      choosenJson: {}, // 可选择的SKU集合
      itemDetail: {
        skus: []
      },
      submitDate: {
        itemId: this.itemId,
        quantity: 1,
        skuAttr: {}
      }
    };
  },
  computed: {
    totalFee() {
      // 计算商品总价
      let skus = this.itemDetail.skus;
      let fee = 0;
      if (skus && skus.length > 0) {
        skus.some(item => {
          let skuAttr1 = JSON.stringify(item.skuAttr); // 数据库sku集合
          let skuAttr2 = JSON.stringify(this.submitDate.skuAttr); // 选中的sku集合
          if (skuAttr1 === skuAttr2) {
            fee = this.submitDate.quantity * item.price;
            return true;
          }
        });
      }
      return fee;
    }
  },
  watch: {},
  methods: {
    submit() {
      this.submitDate.userId = this.$store.state.user.id;
      console.log(this.submitDate);
      this.$api.order.createOrder(this.submitDate).then(res => {
        this.$message.success("创建订单成功，请确认订单信息！");
        this.$emit("showOrderDetail", res.data);
      });
    },
    close() {
      // 关闭表单弹框
      this.$emit("close");
    },
    getItemDetail() {
      this.$api.item.getItemDetail({ itemId: this.itemId }).then(res => {
        console.log(this.itemDetail);
        this.itemDetail = res.data.itemDetail;
        let skus = res.data.itemDetail.skus;
        let choosenJson = {}; // 可选择的SKU集合
        skus.forEach(sku => {
          Object.keys(sku.skuAttr).forEach(key => {
            let value = sku.skuAttr[key];
            if (!choosenJson[key]) {
              choosenJson[key] = [];
            }
            if (choosenJson[key].indexOf(value) === -1) {
              choosenJson[key].push(value);
            }
            this.choosenJson = choosenJson;
          });
        });
      });
    }
  },
  created() {
    this.getItemDetail();
  }
};
</script>

<style lang="scss" scoped>
.create-order-form {
  .form {
    max-height: 400px;
    overflow-y: scroll;
    .main-img {
      width: 80px;
      height: 80px;
    }
  }
  .btn-group {
    margin-top: 40px;
    text-align: center;
    .total-fee {
      font-size: 16px;
      position: absolute;
      left: 80px;
      bottom: 40px;
    }
  }
}
</style>